<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
        <title>大屏自适应布局</title>
    </head>

    <body>
        <div class="screen-wrapper">
            <div class="screen" id="screen">
                <div class="title">大屏自适应布局</div>
                <div class="header">
                    <div id="left">
                        <div id="leftOne"></div>
                        <div id="leftTwo"></div>
                        <div id="leftThree"></div>
                    </div>
                    <div id="main">
                        <div id="mainOne"></div>
                        <div id="mainTwo"></div>
                    </div>
                    <div id="right">
                        <div id="rightOne"></div>
                        <div id="rightTwo"></div>
                        <div id="rightThree"></div>
                    </div>
                </div>
            </div>
        </div>

    </body>
    <script>
        const handleScreenAuto = () => {
            const designDraftWidth = 1920; //设计稿的宽度
            const designDraftHeight = 1080; //设计稿的高度
            //根据屏幕的变化适配的比例
            const scale = document.documentElement.clientWidth / document.documentElement.clientHeight < designDraftWidth / designDraftHeight ?
                (document.documentElement.clientWidth / designDraftWidth) :
                (document.documentElement.clientHeight / designDraftHeight);
            //缩放比例
            (document.querySelector('#screen')).style.transform = `scale(${scale}) translate(-50%,-50%)`;

        }
        handleScreenAuto()
        window.onresize = () => handleScreenAuto();
        setTimeout(() => {
            init()
        })

        function init() {
            var myChartLeftOne = echarts.init(document.getElementById("leftOne"));
            var optionLeftOne = {
                grid: { // 让图表占满容器
                    top: 10,
                    left: 10,
                    right: 10,
                    bottom: 10
                },
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b} : {c} ({d}%)",
                },
                // legend: {
                //     show: false,
                //     emphasis: {
                //         color: 'red'
                //     },
                // },

                series: [{
                    name: "Area Mode",
                    type: "pie",
                    radius: [20, 80],
                    center: ["50%", "50%"],
                    avoidLabelOverlap: false,
                    roseType: "area",
                    itemStyle: {
                        borderRadius: 5,
                    },
                    label: {
                        color: '#85FF67',
                        fontSize: 18
                    },
                    data: [{
                        value: 30,
                        name: "rose 1"
                    }, {
                        value: 28,
                        name: "rose 2"
                    }, {
                        value: 26,
                        name: "rose 3"
                    }, {
                        value: 24,
                        name: "rose 4"
                    }, {
                        value: 22,
                        name: "rose 5"
                    }, {
                        value: 20,
                        name: "rose 6"
                    }, {
                        value: 18,
                        name: "rose 7"
                    }, {
                        value: 16,
                        name: "rose 8"
                    }, ],
                }, ],

            };
            myChartLeftOne.setOption(optionLeftOne);
            var myChartLeftTwo = echarts.init(document.getElementById("leftTwo"));
            var optionLeftTwo = {
                grid: { // 让图表占满容器
                    top: 60,
                    left: 75,
                    right: 60,
                    bottom: 50
                },
                legend: {
                    data: ['收入总量', '支出总量'],
                    itemGap: 10,
                    itemWidth: 30,
                    itemHeight: 15,
                    textStyle: {
                        color: 'white',
                        fontSize: 18
                    }
                },
                xAxis: {
                    type: 'category',
                    // boundaryGap: false,
                    axisLabel: {
                        fontSize: 16,
                        color: 'white'
                    },
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        fontSize: 16,
                        color: 'white'
                    },
                },
                series: [{
                    name: '收入总量',
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0, 1, 0, 0, [{
                                    offset: 0,
                                    color: 'transparent'
                                }, {
                                    offset: 0.5,
                                    color: '#00DCF6'
                                }, {
                                    offset: 1,
                                    color: '#85FF67'
                                }

                            ]
                        )
                    }
                }, {
                    name: '支出总量',

                    data: [620, 732, 701, 734, 1090, 1130, 1120],
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(110, 193, 244, 0.2)',

                    },
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0, 1, 0, 0, [{
                                    offset: 0,
                                    color: '#00DCF6'
                                }, {
                                    offset: 1,
                                    color: '#85FF67'
                                }

                            ]
                        )
                    },
                    barWidth: 10,
                }]
            };
            myChartLeftTwo.setOption(optionLeftTwo);
            var myChartLeftThree = echarts.init(document.getElementById("leftThree"));
            var optionLeftThree = {
                grid: { // 让图表占满容器
                    top: 60,
                    left: 60,
                    right: 60,
                    bottom: 50
                },
                tooltip: {},
                legend: {
                    show: false
                },
                xAxis: {
                    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                    axisLabel: {
                        fontSize: 16,
                        color: 'white'
                    },
                },
                yAxis: {
                    axisLabel: {
                        fontSize: 16,
                        color: 'white'
                    },
                },
                series: [{
                    name: "Sale",
                    type: "bar",
                    data: [5, 20, 36, 10, 10, 20, 4],
                    barWidth: (10),
                    showBackground: true,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0, 1, 0, 0, [{
                                    offset: 0,
                                    color: '#00DCF6'
                                }, {
                                    offset: 1,
                                    color: '#85FF67'
                                }

                            ]
                        ),
                        borderWidth: 12,
                        borderColor: new echarts.graphic.LinearGradient(
                            0, 1, 0, 0, [{
                                    offset: 0,
                                    color: '#00DCF6'
                                }, {
                                    offset: 1,
                                    color: '#85FF67'
                                }

                            ]
                        ),
                    },
                    backgroundStyle: {
                        borderWidth: 10,
                        // color: 'rgb(220, 220, 220, 0.8)',
                        borderColor: "rgb(220, 220, 220, 0.8)"
                    }
                }]
            }
            myChartLeftThree.setOption(optionLeftThree);
            var myChartRightOne = echarts.init(document.getElementById("rightOne"));
            var optionRightOne = {
                grid: { // 让图表占满容器
                    top: 80,
                    left: 90,
                    right: 100,
                    bottom: 50
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999',
                        }
                    }
                },
                legend: {
                    data: ['Eva', 'Pre', 'Temp'],
                    top: 20,
                    itemGap: 10,
                    itemWidth: 30,
                    itemHeight: 15,
                    textStyle: {
                        color: 'white',
                        fontSize: 18
                    }
                },
                xAxis: [{
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisLabel: {
                        fontSize: 14,
                        color: 'white'
                    },
                }],
                yAxis: [{
                    type: 'value',
                    name: 'Pre',
                    nameTextStyle: {
                        fontSize: 14,
                        color: 'white'
                    },
                    min: 0,
                    max: 150,
                    interval: 30,
                    // 定义轴上的刻度文字样式
                    axisLabel: {
                        formatter: '{value} ml',
                        fontSize: 16,
                        color: 'white'
                    }
                }, {
                    type: 'value',
                    name: 'Temp',
                    nameTextStyle: {
                        fontSize: 14,
                        color: 'white'
                    },
                    min: 0,
                    max: 25,
                    interval: 5,
                    axisLabel: {
                        formatter: '{value} °C',
                        color: 'white'
                    }
                }],
                series: [{
                    name: 'Eva',
                    type: 'bar',
                    // stack: 'total',
                    barGap: '-85%',
                    tooltip: {
                        valueFormatter: function(value) {
                            return value + ' ml';
                        }
                    },
                    itemStyle: {
                        barBorderRadius: [7, 7, 0, 0],
                        borderColor: 'rgb(220, 220, 220, 0.8)',
                        borderWidth: 0,
                        color: 'rgb(220, 220, 220,0.8)'
                    },
                    barWidth: 14,
                    data: [
                        150.0, 150.9, 150.0, 150.2, 150.6, 150.7, 150.6
                    ]
                }, {
                    name: 'Pre',
                    type: 'bar',
                    // stack: 'total',
                    tooltip: {
                        valueFormatter: function(value) {
                            return value + ' ml';
                        }
                    },
                    itemStyle: {
                        barBorderRadius: [5, 5, 0, 0],
                        borderColor: 'transparent',
                        borderWidth: 0,
                        color: new echarts.graphic.LinearGradient(
                            0, 1, 0, 0, [{
                                    offset: 0,
                                    color: '#00DCF6'
                                }, {
                                    offset: 1,
                                    color: '#85FF67'
                                }

                            ]
                        )
                    },
                    barWidth: 10,
                    data: [
                        46.0, 28.9, 30.0, 53.2, 65.6, 97.7, 115.6
                    ]
                }, {
                    name: 'Temp',
                    type: 'line',
                    yAxisIndex: 1, //设置执行那个y坐标  0:左边坐标，1:右边坐标
                    tooltip: {
                        valueFormatter: function(value) {
                            return value + ' °C';
                        }
                    },
                    data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3]
                }]
            };
            myChartRightOne.setOption(optionRightOne);
            var myChartRightTwo = echarts.init(document.getElementById("rightTwo"));
            var optionRightTwo = {
                grid: { // 让图表占满容器
                    top: 100,
                    left: 60,
                    right: 60,
                    bottom: 50
                },
                // title: {
                //     text: 'Basic Radar Chart'
                // },
                legend: {
                    data: ['Allocated Budget', 'Actual Spending'],
                    itemGap: 10,
                    itemWidth: 30,
                    itemHeight: 15,
                    textStyle: {
                        color: 'white',
                        fontSize: 18
                    }
                },
                radar: {
                    center: ['50%', '55%'],
                    radius: '60%',
                    // shape: 'circle',
                    name: {
                        fontSize: 16,
                        color: 'white'
                    },
                    indicator: [{
                        name: 'Sales',
                        max: 6500
                    }, {
                        name: 'Admin',
                        max: 16000
                    }, {
                        name: 'Infor',
                        max: 30000
                    }, {
                        name: 'Cust',
                        max: 38000
                    }, {
                        name: 'Dev',
                        max: 52000
                    }, {
                        name: 'Market',
                        max: 25000
                    }],

                },
                series: [{
                    name: {
                        fontSize: 16,
                        color: 'white'
                    },
                    type: 'radar',
                    data: [{
                        value: [4200, 3000, 20000, 35000, 50000, 18000],
                        name: 'Allocated Budget',
                        areaStyle: {
                            color: new echarts.graphic.RadialGradient(
                                0.5, 0.5, 0.5, [{
                                        offset: 0,
                                        color: 'transparent'
                                    }, {
                                        offset: 1,
                                        color: '#85FF67'
                                    },

                                ]
                            )
                        }
                    }, {
                        value: [5000, 14000, 28000, 26000, 42000, 21000],
                        name: 'Actual Spending',
                        areaStyle: {
                            color: new echarts.graphic.RadialGradient(
                                0.5, 0.5, 0.5, [{
                                        offset: 0,
                                        color: 'transparent'
                                    }, {
                                        offset: 1,
                                        color: '#00DCF6'
                                    }

                                ]
                            )
                        }
                    }],

                }]
            };
            myChartRightTwo.setOption(optionRightTwo);
            var myChartRightThree = echarts.init(document.getElementById("rightThree"));
            var optionRightThree = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    type: 'scroll',
                    top: 50,
                    right: 50,
                    // bottom: (50),
                    orient: 'vertical',
                    align: 'right',
                    itemGap: 10,
                    itemWidth: 30,
                    itemHeight: 15,
                    textStyle: {
                        color: 'white',
                        fontSize: 18
                    }

                },
                series: [{
                    name: 'Access From',
                    type: 'pie',
                    center: ['30%', '50%'],
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    padAngle: 5,
                    itemStyle: {
                        borderRadius: 5
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 10,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: true
                    },
                    data: [{
                        value: 1048,
                        name: 'Search Engine'
                    }, {
                        value: 735,
                        name: 'Direct'
                    }, {
                        value: 580,
                        name: 'Email'
                    }, {
                        value: 484,
                        name: 'Union Ads'
                    }, {
                        value: 300,
                        name: 'Video Ads'
                    }]
                }]
            };
            myChartRightThree.setOption(optionRightThree);
            var myChartMainOne = echarts.init(document.getElementById("mainOne"));
            var optionMainOne = {
                grid: { // 让图表占满容器
                    top: 80,
                    left: 70,
                    right: 70,
                    bottom: 50
                },
                series: [{
                    type: 'map',
                    map: 'china', // 设置地图类型
                    itemStyle: { // 地图区块的样式
                        normal: {
                            areaColor: '#00BFFF', // 地图底色，这里设置为浅灰色
                            borderColor: '#000', // 边界线颜色
                            borderWidth: 1 // 边界线宽度
                        },
                        // 高亮状态下的样式
                        emphasis: {
                            areaColor: '#00FFFF' // 鼠标悬停时的颜色
                        }
                    },
                    label: {
                        // show: true // 显示省会名称
                    },
                    data: [
                        // 此处可以添加数据，例如：
                        // {name: '广东', value: 100},
                        // {name: '北京', value: 200}
                    ]
                }]
            };
            myChartMainOne.setOption(optionMainOne);
            var myChartMainTwo = echarts.init(document.getElementById("mainTwo"));
            var optionMainTwo = {
                grid: { // 让图表占满容器
                    top: 70,
                    left: 70,
                    right: 70,
                    bottom: 50
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    data: ['case1', 'case2', 'case3', 'case4'],
                    top: 30,
                    itemGap: 10,
                    itemWidth: 30,
                    itemHeight: 15,
                    textStyle: {
                        color: 'white',
                        fontSize: 18
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                    interval: 0,
                    axisLabel: {
                        fontSize: 16,
                        color: 'white'
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: 'case1',
                    data: [90, 190, 150, 120, 160, 80, 50, 80, 170, 90, 80, 80],
                    type: 'bar',
                    // barWidth: 5
                }, {
                    name: 'case2',
                    data: [60, 100, 150, 80, 70, 110, 130, 150, 80, 70, 110, 90],
                    type: 'bar'
                }, {
                    name: 'case3',
                    data: [120, 120, 130, 100, 110, 60, 90, 110, 90, 120, 160, 120],
                    type: 'bar'
                }, {
                    name: 'case4',
                    data: [100, 160, 80, 40, 70, 110, 180, 130, 110, 70, 130, 130],
                    type: 'bar'
                }]
            };
            myChartMainTwo.setOption(optionMainTwo);
            window.addEventListener('resize', function() {
                myChartLeftOne.resize();
                myChartLeftTwo.resize();
                myChartLeftThree.resize();
                myChartRightOne.resize();
                myChartRightTwo.resize();
                myChartRightThree.resize();
                myChartMainOne.resize();
                myChartMainTwo.resize();
            })

        }
        // init()
        // window.addEventListener('resize', function() {
        //     init()
        // })
        window.onload = () => init()
    </script>
    <style>
        html {
            padding: 0;
            margin: 0;
            width: 100%;
            height: calc(100% - 100px);
            padding: 50px 0;
            background-color: #0c4872;
            background-image: url(./image/background.png);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
        }
        
        .screen-root {
            height: 100%;
            width: 100%;
        }
        
        .screen {
            display: inline-block;
            width: 1920px;
            height: 1080px;
            transform-origin: 0 0;
            position: absolute;
            top: 50%;
            left: 50%;
            /* background-color: black; */
        }
        
        .title {
            font-size: 25px;
            font-weight: bold;
            color: white;
            text-align: center;
        }
        
        .header {
            display: flex;
            justify-content: space-between;
        }
        
        #leftOne,
        #leftTwo,
        #leftThree,
        #rightOne,
        #rightTwo,
        #rightThree {
            width: 500px;
            height: 300px;
            font-size: 16px;
            background-image: url(./image/itemBackGround.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
            margin: 30px 0;
        }
        
        #main {
            width: calc(100% - 1000px);
        }
        
        #mainOne {
            height: 632px;
            font-size: 16px;
            margin: 30px 0;
        }
        
        #mainTwo {
            height: 300px;
            font-size: 16px;
            margin: 30px 0;
        }
    </style>

</html>